<template>
	<!-- item.status == 0 已使用或者已过期 -->
	<!-- item.status == 1 待使用 -->
	<view class="ticketItem">
		<view class="ticket_part" v-for="(item,index) in ticket" :key="index" :class="item.status == 0 || item.status == 1 ? 'box_shadow' : ''"
		 v-show="item.name == '优惠券'">
			<!-- <view class="" v-show="!item.name == '优惠券'">1111111</view> -->
			<view class="ticket_info" :class="item.button_status == 0 ? 'change_bg' :  item.button_status == 1 ? 'border_radius': ''">
				<view class="left">
					<p>{{ item.text }}</p>
					<view class="integral">
						<span class="span_left">{{ item.num }}</span>
						<span class="span_middle">积分</span>
						<span class="span_right">{{ item.num1 }}</span>
					</view>
				</view>
				<view class="right">
					<view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 0">已使用</view>
					<view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 1">使用</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			ticket: {
				type: Array,
				default: [],
			},
		},
		components: {},
		data() {
			return {};
		},
		computed: {},
		methods: {
			toPage(val, text) {
				this.$emit('jump', val, text)
			}
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
.ticketItem {
    width: 100%;
    height: 100%;

    .ticket_part {
        margin-bottom: 16rpx;
        border-radius: 16rpx;

        .ticket_info {
            border-radius: 16rpx;
            // padding: 16px;
            background-image: url(/static/img/card_05.png);
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: space-between;

            .left {
				flex: 2.5;
				// box-sizing: border-box;
				padding: 32rpx;
				overflow: hidden;
				color: rgba(#fff,0.7);
                p {
                    font-size: 28rpx;
                    color: #fff;
                    line-height: 1.5em;
                    padding-bottom: 16rpx;
                }

                .integral {
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
                    .span_left {
                        padding-right: 12rpx;
                        line-height: 1em;
                        font-size: 48rpx;
                        font-weight: 600;
                        color: #fff;
                    }

                    .span_middle {
                        padding-right: 18rpx;
                        line-height: 1em;
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #fff;
                    }

                    .span_right {
                        font-size: 24rpx;
                        color: #fff;
                        opacity: 0.7;
                        text-decoration: line-through;
                    }
                }
            }

            .right {
				flex: 1;
                padding: 32rpx;
                position: relative;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
				text-align: center;
                .button {
                    height: 80rpx;
                    padding: 0 40rpx;
                    border-radius: 16rpx;
                    background-color: #fff;
                    line-height: 80rpx;
                    font-weight: 600;
                    font-size: 32rpx;
                    color: #E02020;
                    text-align: center;
                    white-space: nowrap;
                }

                p {
                    padding-top: 12rpx;
                    line-height: 1em;
                    font-size: 24rpx;
                    color: #fff;
                    opacity: 0.7;
                }
            }
        }

        .ticket_bottom{
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            padding: 0 32rpx;
            background-color: #fff;
            p{
                font-size: 28rpx;
                line-height: 64rpx;
                color: #999;
            }
        }
    }
}
	.ticket_title {
		padding: 32rpx 0 32rpx;
		font-size: 24rpx;
		color: #666;
	}

	.box_shadow {
		box-shadow: 4rpx 8rpx 24rpx 0px rgba(0, 0, 0, 0.08) !important;
	}

	.change_bg {
		border-radius: 16rpx 16rpx 16rpx 16rpx !important;
		background-image: url(/static/img/card_04.png) !important;
		background-color: #bbb;

		.right {
			.button {
				color: #999 !important;
			}
		}
	}

	.border_radius {
		border-radius: 16rpx 16rpx 16rpx 16rpx !important;
	}
</style>
